<template>
  <div class="app-container">
    <el-form class="search-form" :inline="true">
      <el-form-item class="form-button-bar">
        <el-button class="filter-item el-icon-upload2" @click="handleOnline" type="success">&nbsp;上线
        </el-button>
        <el-button class="filter-item el-icon-back" style="margin-left: 10px;" @click="handleRevocation" type="warning">&nbsp;撤回
        </el-button>
        <el-button class="filter-item el-icon-delete" style="margin-left: 10px;" @click="handleDeleteList" type="danger">&nbsp;失效
        </el-button>
        <el-button class="filter-item el-icon-circle-check-outline" style="margin-left: 10px;" @click="handleAudited" type="primary">&nbsp;审核通过
        </el-button>
        <el-button :loading="refreshing" class="filter-item el-icon-refresh" style="margin-left: 10px;" @click="refreshList" type="danger">&nbsp;刷新列表
        </el-button>
        <el-button plain class="search-bar-button" style="float: right;border-width: 2px" type="primary" @click="searchBarVisable = !searchBarVisable">{{searchBarVisable?'收起':'展开'}}搜索项<i
            :class="searchBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
        </el-button>
      </el-form-item>
    </el-form>
    <el-form class="search-form" label-width="100px">
      <div :class="searchBarVisable?'':'search-bar-hide'" style="transition:  all .3s ease-in-out;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" label-width="80px">
              <el-input :clearable="true" v-model="listQuery.title" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item label="来源" label-width="80px">
                  <el-input :clearable="true" v-model="listQuery.source" placeholder="请输入"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="态度" label-width="80px">
          <el-radio v-model="listQuery.attitude" label="" border size="mini">全部</el-radio>
          <el-radio v-model="listQuery.attitude" label="-2" border size="mini">无态度</el-radio>
          <el-radio v-model="listQuery.attitude" label="-1" border size="mini">利空</el-radio>
          <el-radio v-model="listQuery.attitude" label="0" border size="mini">中性</el-radio>
          <el-radio v-model="listQuery.attitude" label="1" border size="mini">利好</el-radio>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属栏目" prop="newsClassId" label-width="80px">
              <el-popover placement="bottom-start" trigger="click" v-model="classVisible" @show="filterText5 = ''">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText5">
                </el-input>
                <el-tree :filter-node-method="filterNode" ref="tree5" :props="props" :data="treeList" :highlight-current="false" node-key="id" :default-expanded-keys="[0]"
                  :render-content="renderClassContent">
                </el-tree>
                <el-select :clearable="true" popper-class="hide" slot="reference" v-model="listQuery.cmsNewsClassId" type="text" placeholder="请选择">
                  <el-option v-for="(item, index) in options" v-show="false" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row v-for="(k,index) in listQuery.tags" :key="k.id">
          <el-col :span="12">
            <el-form-item :label="'标签'+(index+1)">
              <el-popover placement="bottom-start" trigger="click" @show="filterText1 = ''">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText1">
                </el-input>
                <el-tree :filter-node-method="filterNode" ref="tree4" :props="props" :data="treeList" :highlight-current="false" node-key="code" :default-expanded-keys="[0]"
                  :render-content="renderClassContent">
                </el-tree>
                <el-select :clearable="true" popper-class="hide" slot="reference" v-model="k.tagName" type="text" placeholder="请输入">
                  <el-option v-for="(item, index) in options" v-show="false" :key="index.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权重打分">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-select v-model="k.tagScore" placeholder="请选择">
                    <el-option v-for="item in qzoptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-input :clearable="true" v-model="k.tagComparision" placeholder="请输入"></el-input>
                </el-col>
                <el-col :span="4" v-if="index===0">
                  <el-button type="primary" icon="el-icon-plus" circle @click="addTags"></el-button>
                </el-col>
                <el-col :span="4" v-else>
                  <el-button type="primary" icon="el-icon-minus" circle @click="delTags(index)"></el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
              <el-col :span="12" v-for="(k,index) in listQuery.tagList" :key="k.id">
                <el-row>
                  <el-col :span="10">
                    <el-form-item :label="tagName[k.tagType]+'标签'" label-width="80px">
                      <el-select v-model="k.tagCode" value-key="tag_code" clearable filterable remote reserve-keyword placeholder="请输入关键词"
                        :remote-method="((query)=>{remoteMethodSearch(k.tagType,query)})" :loading="loading">
                        <el-option v-for="item in searchOptions[tagType[k.tagType]]" :key="item.tag_code" :label="item.name" :value="item.tag_code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label="权重打分" label-width="80px">
                      <el-row>
                        <el-col :span="11">
                          <el-select v-model="k.tagComparision" clearable placeholder="">
                            <el-option v-for="item in qzoptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-col>
                        <el-col :span="13">
                          <el-input :clearable="true" v-model="k.tagScore" placeholder="分数"></el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
         </el-row>
        <el-form-item label="审核状态" label-width="80px">
          <el-radio v-model="listQuery.viewStatus" label="" border size="mini">全部</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="0" border size="mini">未审核</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="1" border size="mini">已审核</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="2" border size="mini">已上线</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="3" border size="mini">已撤回</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="4" border size="mini">已驳回</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="6" border size="mini">已失效</el-radio>
        </el-form-item>
        <el-form-item label="推送方式" label-width="80px">
          <el-radio v-model="listQuery.pushChannel" label="" border size="mini">全部</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="全员推送" border size="mini">全员推送</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="不推送" border size="mini">不推送</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="按板块推送" border size="mini">按板块推送</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="按个股推送" border size="mini">按个股推送</el-radio>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作者" label-width="80px">
              <el-input  :clearable="true" v-model="listQuery.author" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="更新时间" label-width="80px">
          <el-radio v-model="listQuery.chooseTime" label="" border size="mini">自定义</el-radio>
          <el-radio v-model="listQuery.chooseTime" label="1" border size="mini">今天</el-radio>
          <el-radio v-model="listQuery.chooseTime" label="3" border size="mini">近三天</el-radio>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker :clearable="true" type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="listQuery.chooseTime = ''" @keyup.enter.native="getList" style="width: 450px;"
            class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="listQuery.updateTime">
          </el-date-picker>
        </el-form-item>
          <el-row>
          <el-col :span='6'>
               <el-form-item label="异动新闻" label-width="80px">
                <!-- <el-radio v-model="listQuery.scene" label="" border size="mini">全部</el-radio>
                <el-radio v-model="listQuery.scene" label="1" border size="mini">银小河浮窗</el-radio>
                <el-radio v-model="listQuery.scene" label="2" border size="mini">基金动态</el-radio>  -->
                  <el-select v-model="listQuery.scene" multiple placeholder="请选择">
                    <el-option
                      v-for="item in sceneOptions_"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
            {{$t('table.search')}}
          </el-button>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="resetSearch">
                重置
          </el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="标题" min-width="200">
        <template slot-scope="scope">
          <el-button class="preview-button" type="text" @click="handleShow(scope.row)">{{scope.row.title}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="来源" width="150" prop="source"></el-table-column>
      <el-table-column align="center" label="相关板块">
        <template slot-scope="scope">
          <el-tooltip :visible-arrow="false" class="tooltip" effect="dark" :content="scope.row.plateStr" placement="top-start">
            <span class="nowrap">{{scope.row.plateStr}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新时间" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.updateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序时间" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.orderTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属栏目">
        <template slot-scope="scope">
          <el-tooltip :visible-arrow="false" class="tooltip" effect="dark" :content="scope.row.newsClassStr" placement="top-start">
            <span class="nowrap">{{scope.row.newsClassStr}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态">
        <template slot-scope="scope">
          <el-tag size="small" :type="formatClass(scope.row.viewStatus)">{{formatStatu(scope.row.viewStatus)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="驳回原因" min-width="250">
        <template slot-scope="scope">
          <span>{{scope.row.auditRejectMessage}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核人">
        <template slot-scope="scope">
          <span>{{scope.row.auditor}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="作者">
        <template slot-scope="scope">
          <span>{{scope.row.author}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送方式">
        <template slot-scope="scope">
          <span>{{scope.row.sendChannel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.viewStatus === 0 && scope.row.creater !== $store.state.user.userCode" content="编辑" placement="top">
            <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-edit" type="primary" size="mini" @click="handleUpdate(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip v-else content="查看" placement="top">
            <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-view" type="success" size="mini" @click="handleShow(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="scope.row.status!='deleted'" content="失效" placement="top">
            <el-button class="button-icon el-icon-delete" size="mini" type="danger" :disabled="scope.row.viewStatus === 6" @click="handleDelete(scope.row)">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :fullscreen='true' :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="110px" style='margin: auto; max-width: 1200px'>
		    <el-form-item label="标题" prop="title">
		      <el-input disabled v-model="temp.title" type="text" placeholder="请输入">
		      </el-input>
		    </el-form-item>
		    <el-form-item label="正文预览" prop="content">
		      <el-tabs type="card"  @tab-click="handleTabClick">
		        <el-tab-pane label="手机预览">
		          <el-card class="phone">
		            <div class="top-bar">资讯预览</div>
		            <div class="title">{{temp.title}}</div>
		            <div class="info">
		              <span>来源：{{formatSource(temp.source)}}&emsp;</span>
		              <span>发布时间：{{temp.publishTime}}</span>
		            </div>
		            <div class="summary">摘要：{{temp.summary}}</div>
		            <div class="content">
		              <p v-html="temp.content"></p>
		            </div>
		          </el-card>
		        </el-tab-pane>
		        <el-tab-pane label="PC预览">
		          <el-card class="pc">
		            <div class="title">{{temp.title}}</div>
		            <div class="info">
		              <span>来源：{{formatSource(temp.source)}}&emsp;</span>
		              <span>发布时间：{{temp.publishTime}}</span>
		            </div>
		            <div class="summary">摘要：{{temp.summary}}</div>
		            <div class="content">
		              <p v-html="temp.content"></p>
		            </div>
		          </el-card>
		        </el-tab-pane>
		      </el-tabs>
		    </el-form-item>
      	<el-row>
          <el-col :span="12">
            <el-form-item label="股票" prop="stockInfos">
              <el-select v-model="temp.stockInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodstock" :loading="loading">
                <el-option v-for="item in temp.stockInfoslist" :key="item.tag_code+Math.random()" :label="item.name+'('+item.code+')'" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基金" prop="fundInfos">
              <el-select v-model="temp.fundInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodfund" :loading="loading">
                <el-option v-for="item in temp.fundInfoslist" :key="item.tag_code+Math.random()" :label="item.name+'('+item.code+')'" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主题" prop="conceptInfos">
              <el-select v-model="temp.conceptInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodtheme" :loading="loading">
                <el-option v-for="item in options0" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业" prop="industryInfos">
              <el-select v-model="temp.industryInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodindustry" :loading="loading">
                <el-option v-for="item in options1" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="市场">
              <el-select v-model="temp.marketInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodmarket" :loading="loading">
                <el-option v-for="item in flowChartList" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人物">
              <el-select v-model="temp.peopleInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodpeople" :loading="loading">
                <el-option v-for="item in rwOptions" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地域">
              <el-select v-model="temp.districtInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethoddistrict" :loading="loading">
                <el-option v-for="item in areaOptions" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织">
              <el-select v-model="temp.organInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodorgan" :loading="loading">
                <el-option v-for="item in organOptions" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="核心标签(主)" prop="mainKeyword">
              <el-tag v-for="tag in temp.mainKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心标签(副)" prop="viceKeyword">
              <el-tag v-for="tag in temp.viceKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属栏目" prop="newsClassId">
              <el-popover placement="bottom-start" trigger="click" @show="filterText4 = ''">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText4">
                </el-input>
                <el-tree :filter-node-method="filterNode" ref="tree4" :props="props" :data="treeList" :highlight-current="false" node-key="id" :default-expanded-keys="[0]"
                  :render-content="renderContent">
                </el-tree>
                <el-select value-key='id' multiple popper-class="hide" slot="reference" v-model="temp.newsClassId" type="text" placeholder="请输入">
                  <el-option v-for="(item,index) in options" :key="item.id" :value="item" :label="item.name"></el-option>
                </el-select>
              </el-popover>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="数据源来源" prop="tbSource">
              <el-input v-model="temp.tbSource"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" style="line-height:36px;color: #666666;font-weight: 700;">App场景运营标记:</el-col>
          <el-col :span="6">
            <el-form-item label="覆盖类型" prop="ranges">
              <el-select v-model="temp.ranges" placeholder="请选择">
                <el-option v-for="item in rangesOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="展示场景" prop="scene">
              <el-select multiple v-model="temp.scene" type="text" placeholder="请选择">
                <el-option v-for="item in sceneOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="新闻类型" prop="newstype">
              <el-select v-model="temp.newstype" placeholder="请选择">
                <el-option v-for="item in newstypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="态度" prop="attitude">
              <el-select v-model="temp.attitude" type="text" placeholder="请选择">
                <el-option :value="-2" label="无态度"></el-option>
                <el-option :value="-1" label="利空"></el-option>
                <el-option :value="0" label="中性"></el-option>
                <el-option :value="1" label="利好"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="online">
              <el-select v-model="temp.online" type="text" placeholder="请选择">
                <el-option :value="0" label="立即上线"></el-option>
                <el-option :value="1" label="暂缓上线"></el-option>
                <el-option :value="2" label="已撤回"></el-option>
                <el-option :value="3" label="已失效"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推送方式" prop="sendChannel">
              <el-select :default-first-option="true" v-model="temp.sendChannel" type="text" placeholder="请选择">
                <el-option value="全员推送" label="全员推送"></el-option>
                <el-option value="不推送" label="不推送"></el-option>
                <el-option value="按板块推送" label="按板块推送"></el-option>
                <el-option value="按个股推送" label="按个股推送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="置顶时间" prop="topTime">
              <el-date-picker v-model="temp.topTime" type="datetime" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      	<el-row>
          <el-col :span="24">
            <el-form-item label="摘要" prop="summary">
              <el-input disabled v-model="temp.summary" type="textarea" :rows="5" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
      	</el-row>
      	<el-row>
          <el-col :span="6">
            <el-form-item label="作者" prop="author">
              <el-input disabled v-model="temp.author" type="text" :rows="5" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="temp.createTime" label="入库时间" prop="createTime">
              <el-input disabled v-model="temp.createTime" type="text" :rows="5" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源" prop="source">
              <el-select disabled :default-first-option="true" v-model="temp.source" type="text" placeholder="请选择">
                <el-option v-for="(item, key) in dataDict.news_source" :key="key" :value="item.dictKey" :label="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button plain class="search-bar-button" style="border-width: 2px" type="primary" @click="extendBarVisable = !extendBarVisable">{{extendBarVisable?'收起':'展开'}}附加字段<i
                  :class="extendBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col v-show="extendBarVisable" v-for="i of 10" :key='i' :span="24">
            <el-form-item :label="'附加字段'+i" :prop="'additional_'+ i">
              <el-input disabled v-model="temp['additional_'+ (i-1)]" type="text" placeholder=""></el-input>
            </el-form-item>
          </el-col>
      	</el-row>
      	<el-row>
          <el-col :span="16">
            <el-form-item label="资讯配图">
              <span v-if="!image">暂无配图</span>
              <img style="max-height: 300px" :src="image.url" :alt="image.name">
            </el-form-item>
          </el-col>
      	</el-row>
        <div style="text-align: center">
          <template v-if="!isUpdate">
            <el-button type="success" @click="updateAppStatus">更新App标记</el-button>
<!--            <el-button type="success" @click="handleUpdateTime">更新排序</el-button>-->
            <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
          </template>
          <template v-else>
            <el-button type="warning" @click="auditReject">驳回</el-button>
            <el-button type="success" @click="updateAuditData">审核通过</el-button>
<!--            <el-button type="success" @click="handleUpdateTime">更新排序</el-button>-->
            <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
          </template>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :fullscreen='true' :title="'查看'" :visible.sync="dialogFormVisible2">
      <el-form :rules="rules" ref="dataForm2" :model="temp" label-position="left" label-width="110px" style='margin: auto; max-width: 1200px'>
		    <el-form-item label="标题" prop="title">
		      <el-input :disabled='true' v-model="temp.title" type="text" placeholder="请输入">
		      </el-input>
		    </el-form-item>
		    <el-form-item label="正文预览" prop="content">
		      <el-tabs type="card"  @tab-click="handleTabClick">
		        <el-tab-pane label="手机预览">
		          <el-card class="phone">
		            <div class="top-bar">资讯预览</div>
		            <div class="title">{{temp.title}}</div>
		            <div class="info">
		              <span>来源：{{formatSource(temp.source)}}&emsp;</span>
		              <span>发布时间：{{temp.publishTime}}</span>
		            </div>
		            <div class="summary">摘要：{{temp.summary}}</div>
		            <div class="content">
		              <p v-html="temp.content"></p>
		            </div>
		          </el-card>
		        </el-tab-pane>
		        <el-tab-pane label="PC预览">
		          <el-card class="pc">
		            <div class="title">{{temp.title}}</div>
		            <div class="info">
		              <span>来源：{{formatSource(temp.source)}}&emsp;</span>
		              <span>发布时间：{{temp.publishTime}}</span>
		            </div>
		            <div class="summary">摘要：{{temp.summary}}</div>
		            <div class="content">
		              <p v-html="temp.content"></p>
		            </div>
		          </el-card>
		        </el-tab-pane>
		      </el-tabs>
		    </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="股票">
              <el-tooltip v-for="tag in temp.stockInfoslist" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name+'('+tag.code+')'}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.stockInfoslist" :key="tag.tag_code">{{tag.name+'('+tag.code+')'}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基金">
              <el-tooltip v-for="tag in temp.fundInfoslist" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name+'('+tag.code+')'}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.fundInfoslist" :key="tag.tag_code">{{tag.name+'('+tag.code+')'}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主题">
              <el-tooltip v-for="tag in options0" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in options0" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业">
              <el-tooltip v-for="tag in options1" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in options1" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="市场">
              <el-tooltip v-for="tag in temp.marketInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.marketInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人物">
              <el-tooltip v-for="tag in temp.peopleInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.peopleInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地域">
              <el-tooltip v-for="tag in temp.districtInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.districtInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织">
              <el-tooltip v-for="tag in temp.organInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.organInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="核心标签(主)" prop="mainKeyword">
              <el-tag v-for="tag in temp.mainKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心标签(副)" prop="viceKeyword">
              <el-tag v-for="tag in temp.viceKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属栏目" prop="newsClassId">
              <el-select disabled  value-key='id' multiple popper-class="hide"  v-model="temp.newsClassId" type="text" placeholder="请输入">
                <el-option v-for="(item,index) in options" :key="item.id" :value="item" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源来源" prop="tbSource">
              <el-input :disabled='true' v-model="temp.tbSource" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" style="line-height:36px;color: #666666;font-weight: 700;">App场景运营标记:</el-col>
          <el-col :span="6">
            <el-form-item label="覆盖类型" prop="ranges">
              <el-select  v-model="temp.ranges" type="text" placeholder="请选择">
                <el-option v-for="item in rangesOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="展示场景" prop="scene">
              <el-select  multiple v-model="temp.scene" type="text" placeholder="请选择">
                <el-option v-for="item in sceneOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="新闻类型" prop="newstype">
              <el-select  v-model="temp.newstype" type="text" placeholder="请选择">
                <el-option v-for="item in newstypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="态度" prop="attitude">
              <el-select disabled v-model="temp.attitude" type="text" placeholder="请选择">
                <el-option :value="-2" label="无态度"></el-option>
                <el-option :value="-1" label="利空"></el-option>
                <el-option :value="0" label="中性"></el-option>
                <el-option :value="1" label="利好"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="online">
              <el-select disabled v-model="temp.online" type="text" placeholder="请选择">
                <el-option :value="0" label="立即上线"></el-option>
                <el-option :value="1" label="暂缓上线"></el-option>
                <el-option :value="2" label="已撤回"></el-option>
                <el-option :value="3" label="已失效"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推送方式" prop="sendChannel">
              <el-select disabled :default-first-option="true" v-model="temp.sendChannel" type="text" placeholder="请选择">
                <el-option value="全员推送" label="全员推送"></el-option>
                <el-option value="不推送" label="不推送"></el-option>
                <el-option value="按板块推送" label="按板块推送"></el-option>
                <el-option value="按个股推送" label="按个股推送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="置顶时间" prop="topTime">
              <el-input :disabled='true' v-model="temp.topTime" type="text" placeholder="选择日期"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="摘要" prop="summary">
              <el-input :disabled='true' v-model="temp.summary" type="textarea" :rows="5" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      	<el-row>
          <el-col :span="6">
            <el-form-item label="作者" prop="author">
              <el-input :disabled='true' v-model="temp.author" type="text" :rows="5" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库时间" prop="createTime">
              <el-input :disabled='true' v-model="temp.createTime" type="text" :rows="5" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源" prop="source">
              <el-select disabled v-model="temp.source">
                <el-option v-for="(item, key) in dataDict.news_source" :key="key" :value="item.dictValue" :label="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button plain class="search-bar-button" style="border-width: 2px" type="primary" @click="extendBarVisable = !extendBarVisable">{{extendBarVisable?'收起':'展开'}}附加字段<i
                  :class="extendBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col v-show="extendBarVisable" v-for="i of 10" :key='i' :span="24">
            <el-form-item :label="'附加字段'+i" :prop="'additional_'+ i">
              <el-input :disabled='true' v-model="temp['additional_'+ (i-1)]" type="text" placeholder=""></el-input>
            </el-form-item>
          </el-col>
      	</el-row>
      	<el-row>
          <el-col :span="24">
            <el-form-item label="资讯配图">
              <span v-if="!image">暂无配图</span>
              <img v-else style="max-height: 300px" :src="image.url" :alt="image.name">
            </el-form-item>
          </el-col>
      	</el-row>
        <el-row>
        	<el-col :span="12">
            <el-form-item label="附件列表">
              <el-upload :action="uploadAction" :headers="{ Authorization: 'Bearer ' + $store.getters.token }" disabled :file-list="infoList">
              </el-upload>
            </el-form-item>
        	</el-col>
        </el-row>
        <div style="text-align: center">
          <el-button type="success" @click="updateAppStatus">更新App标记</el-button>
<!--          <el-button type="success" @click="handleUpdateTime">更新排序</el-button>-->
          <el-button type="primary" @click="dialogFormVisible2 = false">关闭</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="资讯预览" :visible.sync="previewDialogVisible" width="80%" style="margin-top: -6rem;" append-to-body>
      <el-tabs type="card" @tab-click="handleTabClick">
        <el-tab-pane label="手机预览">
          <el-card class="phone">
            <div class="top-bar">
              资讯预览
            </div>
            <div class="title">{{previewData.title}}</div>
            <div class="info">
              <span>来源：{{formatSource(previewData.source)}}&emsp;</span>
              <span>发布时间：{{previewData.publishTime}}</span>
            </div>
            <div class="summary">摘要：{{previewData.summary}}</div>
            <div class="content">
              <p v-html="formatContent(previewData)"></p>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="PC预览">
          <el-card class="pc">
            <div class="title">{{previewData.title}}</div>
            <div class="info">
              <span>来源：{{formatSource(previewData.source)}}&emsp;</span>
              <span>发布时间：{{previewData.publishTime}}</span>
            </div>
            <div class="summary">摘要：{{previewData.summary}}</div>
            <div class="content">
              <p v-html="formatContent(previewData)"></p>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  articlePlateList,
  articleAllPlateList,
  articleStockList,
  articleAuditList,
  auditReject,
  userClassList,
  articleGet,
  batchDelete,
  updateAppScene,
  articleDelete,
  batchAudited,
  batchOnline,
  batchRevocation,
  thirdPartClassList,
  tagsSearch, updateOrderTime
} from '../../api/article'
import { databaseList } from '../../api/data'
import { getTypeDict } from '../../api/systemManagement'
import Tinymce from '@/components/Tinymce'
import waves from '@/directive/waves' // 水波纹指令
import pinyin from 'pinyin'

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  components: { Tinymce },
  watch: {
    filterText4(val) {
      this.$refs.tree4.filter(val)
    },
    filterText5(val) {
      this.$refs.tree5.filter(val)
    },
    'listQuery.chooseTime'(val) {
      if (val) {
        const endTime = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate() + 1
        ).getTime()
        this.listQuery.updateTime = [
          endTime - 24 * 3600 * 1000 * val,
          endTime - 1000
        ]
      }
    }
  },
  data() {
    return {
      filterText4: '',
      filterText5: '',
      multipleSelection: [],
      multipleSelectionIds: [],
      props: {
        label: 'name',
        id: 'id',
        key: 'id'
      },
      tableKey: 0,
      list: null,
      total: null,
      refreshing: false,
      loading:false,
      listLoading: true,
      editLoading: false,
       tagType: {
        0: "stock",
        1: "fund",
        2: "theme",
        3: "industry",
        4: "market",
        5: "people",
        6: "districts",
        7: "organs",
      },
      tagName: {
        0: "股票",
        1: "基金",
        2: "主题",
        3: "行业",
        4: "市场",
        5: "人物",
        6: "地域",
        7: "组织",
      },
      // {
      //   value:'',
      //   label:'全部'
      // },
      sceneOptions_:[{
          value: '0',
          label: '空白'
        },{
        value:'1',
        label:'银小河浮窗'
      },{
        value:'2',
        label:'基金动态'
      }],
      listQuery: {
        auditStatus:[0,1,-1],
        isOriginal: 0,
        pageNum: 1,
        pageSize: 20,
        title: '',
        attitude: '',
        author: '',
        source: '',
        cmsNewsClassId: '',
        plateCode: '',
        pushChannel: '',
        stockCode: '',
        viewStatus: '',
        chooseTime: '',
        chooseTime2: '',
        updateTime: [
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() -
            24 * 3600 * 1000,
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() - 1000
        ],
        publishTime: ['', ''],
        scene: [],
        tagList: [
          {
            name: "股票",
            tagCode: "",
            tagType: "0",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "基金",
            tagCode: "",
            tagType: "1",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "主题",
            tagCode: "",
            tagType: "2",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "行业",
            tagCode: "",
            tagType: "3",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "市场",
            tagCode: "",
            tagType: "4",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "人物",
            tagCode: "",
            tagType: "5",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "地域",
            tagCode: "",
            tagType: "6",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "组织",
            tagCode: "",
            tagType: "7",
            tagScore: "",
            tagComparision: "",
          }
        ],
        tbSourceId: '',
        thirdPartClassId: ''
      },
      searchOptions: {
        stock: [],
        fund: [],
        theme: [],
        industry: [],
        market: [],
        people: [],
        district: [],
        organ: [],
      },
      allPlateList: [],
      filterPlateList: [],
      allStockList: [],
      filterStockList: [],
      dialogVisible: false,
      extendBarVisable: false,
      showReviewer: false,
      stockSearch: '',
      temp: {
        attitude: 0,
        author: '',
        source: '',
        content: '',
        sendChannel: '',
        isOriginal:0,
        newsClassId: [],
        newsPlateCodes0: [],
        conceptInfos: [],
        conceptInfoslist: [],
        industryInfos: [],
        newsPlateCodes2: [],
        stockInfos: [],
        stockInfoslist: [],
        fundInfos: [],
        fundInfoslist: [],
        marketInfos: [],
        online: 1,
        topTime: '',
        summary: '',
        title: '',
        enterTime: '',
        publishTime: '',
        tbSource: ''
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogPvVisible: false,
      stockLib: [],
      treeList: [{ name: '栏目列表', id: 0, children: [] }],
      options: [],
      options0: [],
      options1: [],
      options2: [],
      rangesOptions: [
        {
          value: 0,
          label: '空白'
        },
        {
          value: 1,
          label: '按全市场来'
        },
        {
          value: 2,
          label: '按行业'
        },
        {
          value: 3,
          label: '按个股'
        }
      ],
      sceneOptions: [
        {
          value: '0',
          label: '空白'
        },
        {
          value: '1',
          label: '银小河浮窗'
        },
        {
          value:'2',
          label:"基金动态"
        }
      ],
      newstypeOptions: [
        {
          value: 0,
          label: '空白'
        },
        {
          value: 1,
          label: '新闻'
        },
        {
          value: 2,
          label: '重磅'
        },
        {
          value: 3,
          label: '突发'
        },
        {
          value: 4,
          label: '解读'
        },
        {
          value: 5,
          label: '异动'
        },
        {
          value: 6,
          label: '公告'
        }
      ],
      pvData: [],
      rwList: [],
      rwOptions: [],
      thirdlist: [],
      organOptions: [],
      areaOptions: [],
      flowChartList: [],
      classVisible: false,
      files: [],
      rules: {
      },
      downloadLoading: false,
      image: '',
      imageType: '',
      imageList: [],
      previewData: '',
      previewDialogVisible: false,
      imageLoading: false,
      imageListLoading: false,
      imageListVisible: false,
      isUpdate: false,
      dataDict: {
        news_source: []
      },
      uploadAction:'',
      infoList:[],
      searchBarVisable: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end =
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() + 1
                ).getTime() - 1000
              const start = end + 1000 - 3600 * 1000 * 24
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end =
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() + 1
                ).getTime() - 1000
              const start = end + 1000 - 3600 * 1000 * 24 * 3
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end =
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() + 1
                ).getTime() - 1000
              const start = end + 1000 - 3600 * 1000 * 24 * 7
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      qzoptions: [
        {
          value: '0',
          label: '='
        },
        {
          value: '1',
          label: '>'
        },
        {
          value: '2',
          label: '≥'
        },
        {
          value: '3',
          label: '<'
        },
        {
          value: '5',
          label: '≤'
        }
      ],
      dbList: []
      }
    },
    created() {
      this.getDict()
      this.getList()
      this.getClass()
      this.getPlateList()
      this.getdatabaseList()
    },
    methods: {
      handleUpdateTime(){
        let params = {
          id:this.temp.id
        }
        updateOrderTime(params).then(res=>{
          console.log(res)
          if(res.Meta.Code===0){
            this.$notify({
              title: "更新状态",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          }else{
            this.$notify({
              title: "更新状态",
              message: "更新失败",
              type: "error",
              duration: 2000
            });
          }
        })
      },
    resetSearch(){

      this. listQuery={
        auditStatus:[0,1,-1],
        isOriginal: 0,
        pageNum: 1,
        pageSize: 20,
        title: '',
        attitude: '',
        author: '',
        source: '',
        cmsNewsClassId: '',
        plateCode: '',
        pushChannel: '',
        stockCode: '',
        viewStatus: '',
        chooseTime: '',
        chooseTime2: '',
        updateTime: [
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() -
            24 * 3600 * 1000,
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() - 1000
        ],
        publishTime: ['', ''],
        scene: [],
        tagList: [
          {
            name: "股票",
            tagCode: "",
            tagType: "0",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "基金",
            tagCode: "",
            tagType: "1",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "主题",
            tagCode: "",
            tagType: "2",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "行业",
            tagCode: "",
            tagType: "3",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "市场",
            tagCode: "",
            tagType: "4",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "人物",
            tagCode: "",
            tagType: "5",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "地域",
            tagCode: "",
            tagType: "6",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "组织",
            tagCode: "",
            tagType: "7",
            tagScore: "",
            tagComparision: "",
          }
        ],
        tbSourceId: '',
        thirdPartClassId: ''
      }
      this.getList();
    },
    getdatabaseList() {
      databaseList({
        pageNum: 1,
        pageSize: 9999
      }).then((res) => {
        this.dbList = res.Data
      })
    },
    getDict() {
        getTypeDict({ type: 'news_source' }).then(response => {
          this.dataDict.news_source = response.Data
        })
      },
    formatContent(data) {
      if (!data.content) return
      // console.log(data)
      const keyword = []
      // console.log(data)
      if (data.stockInfos && data.stockInfos.length > 0) {
        keyword.push(
          data.stockInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.conceptInfos && data.conceptInfos.length > 0) {
        keyword.push(
          data.conceptInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.industryInfos && data.industryInfos.length > 0) {
        keyword.push(
          data.industryInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.newsPlateCodes2 && data.newsPlateCodes2.length > 0) {
        keyword.push(
          data.newsPlateCodes2
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if(data.fundInfos && data.fundInfos.length>0 ){
        keyword.push(
          data.fundInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }

      if (keyword.length === 0) return data.content
      const contentReg = new RegExp(
        '(?!<[^>]*)(' + keyword.join('|').replace(/\*/g, '\\*') + ')(?![^<]*>)',
        'g'
      )
      // const contentReg = new RegExp('(' + keyword + ')','g')
      return data.content.replace(
        contentReg,
        '<span class="news-keyword">$1</span>'
      )
    },
    filterNode(value, data) {
      if (!value) return true
      return (
        data.name.indexOf(value) !== -1 ||
        pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        })
          .join('')
          .indexOf(value) !== -1
      )
    },
    remoteMethodstock(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'stock',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.temp.stockInfoslist=[...this.temp.stockInfos,...list]
          })
      } else {
        this.loading=false
        this.temp.stockInfoslist = [...this.temp.stockInfos]
      }
    },
    remoteMethodfund(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'fund',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.temp.fundInfoslist=[...this.temp.fundInfos,...list]
          })
      } else {
        this.loading=false
        this.temp.fundInfoslist = [...this.temp.fundInfos]
      }
    },
    remoteMethodtheme(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'theme',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.options0=[...this.temp.conceptInfos,...list]
          })
      } else {
        this.loading=false
        this.options0 = [...this.temp.conceptInfos]
      }
    },
    remoteMethodindustry(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'industry',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.options1=[...this.temp.industryInfos,...list]
          })
      } else {
        this.loading=false
        this.options1 = [...this.temp.industryInfos]
      }
    },
    remoteMethodmarket(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'market',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.flowChartList=[...this.temp.marketInfos,...list]
          })
      } else {
        this.loading=false
        this.flowChartList = [...this.temp.marketInfos]
      }
    },
    remoteMethodpeople(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'people',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.rwOptions=[...this.temp.peopleInfos,...list]
          })
      } else {
        this.loading=false
        this.rwOptions = [...this.temp.peopleInfos]
      }
    },
    remoteMethoddistrict(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'district',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.areaOptions=[...this.temp.districtInfos,...list]
          })
      } else {
        this.loading=false
        this.areaOptions = [...this.temp.districtInfos]
      }
    },
    remoteMethodorgan(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'organ',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.organOptions=[...this.temp.organInfos,...list]
          })
      } else {
        this.loading=false
        this.organOptions = [...this.temp.organInfos]
      }
    },

      handleSelectionChange(val) {
        this.multipleSelectionIds = val.map(e => e.id)
        this.multipleSelection = val
      },
      handleOnline() {
        const ids = this.multipleSelection.filter(e => (e.viewStatus === 1||e.viewStatus === 3)).map(e => e.id)
        if (ids.length === 0) return
        batchOnline(ids).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '上线成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handleRevocation() {
        const ids = this.multipleSelection.filter(e => e.viewStatus === 2).map(e => e.id)
        if (ids.length === 0) return
        batchRevocation(ids).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '撤回成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handleAudited() {
        const ids = this.multipleSelection.filter(e => (e.viewStatus === 0) && e.creater !== this.$store.state.user.userCode).map(e => e.id)
        console.log('ids',ids);
        if (ids.length === 0) return
        batchAudited(ids).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '审核成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handleDeleteList() {
        if (this.multipleSelectionIds.length === 0){
    			this.$message({ type: 'warning', message: '请勾选需要删除的数据' })
    			return
        }
        this.$confirm('一旦失效，该篇资讯将彻底下线并且不可编辑，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          batchDelete(this.multipleSelectionIds).then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '失效成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      formatAttitude(data) {
        switch (data) {
          case -1:
            return '利空'
          case 0:
            return '中性'
          case 1:
            return '利好'
        }
      },
      formatClass(data) {
        switch (data) {
          case 0:
            return 'danger' // '未审核'
          case 1:
            return 'success' // '已审核'
          case 2:
            return 'primary' // '已上线'
          case 3:
            return 'warning' // '已撤回'
          case 4:
            return 'warning' // '已驳回'
          case 5:
            return 'warning' // '未发布'
          case 6:
            return 'info' // '已失效'
        }
      },
      formatStatu(data) {
        switch (data) {
          case 0:
            return '未审核'
          case 1:
            return '已审核'
          case 2:
            return '已上线'
          case 3:
            return '已撤回'
          case 4:
            return '已驳回'
          case 5:
            return '未发布'
          case 6:
            return '已失效'
        }
      },
      formatAudit(data) {
        switch (data) {
          case 0:
            return '已审核'
          default :
            return '未审核'
        }
      },
      formatOnline(data) {
        switch (data) {
          case 0:
            return '上线'
          case 1:
            return '下线'
          case 2:
            return '已撤回'
        }
      },
      formatSource(data) {
        for (let i = 0; i < this.dataDict.news_source.length; i++) {
          if (this.dataDict.news_source[i].dictKey === data) return this.dataDict.news_source[i].dictValue
        }
        return data
      },
      refreshList() {
        this.refreshing = true
        this.listQuery.title = this.listQuery.title.trim()
        const params = Object.assign({}, this.listQuery)
        if (this.listQuery.updateTime) {
          params.startUpdateTime = this.listQuery.updateTime[0]
          params.endUpdateTime = this.listQuery.updateTime[1]
        } else {
          params.startUpdateTime = ''
          params.endUpdateTime = ''
        }
        articleAuditList(params).then(response => {
          this.refreshing = false
          this.list = response.Data
          this.total = parseInt(response.total)
          this.$message({
            message: '刷新成功',
            type: 'success'
          })
        }).catch(() => {
          this.refreshing = false
        })
      },
      remoteMethodSearch(type, query) {
        if (query !== "") {
          this.loading = true;
          tagsSearch({
            type: this.tagType[type],
            key: query,
          }).then((res) => {
            const list = res.Data.map((i) => {
               if(type==='0'||type==='1'){
                  return {
                    ...i,
                    tag_code: i.tagCode,
                    name:i.name+`(${i.code})`
                  };
                }else{
                  return {
                    ...i,
                    tag_code: i.tagCode
                  };
                }
            });
            this.searchOptions[this.tagType[type]] = list;
            console.log(this.searchOptions);
            this.loading = false;
          });
        } else {
          this.searchOptions[this.tagType[type]] = [];
          this.loading = false;
        }
      },
      getList() {

        let tagScoreFlag = true;
        let tempList = this.listQuery.tagList;
        for (let index = 0; index < tempList.length; index++) {
          const element = tempList[index];
          if((element.tagComparision!==''&&element.tagScore!=="")||(element.tagComparision ===''&&element.tagScore==="")){

          } else{
            tagScoreFlag = false;
            break;
          }
        }

        if(!tagScoreFlag){
        this.$message({
            message: '标签搜索请填写完整，权重 分数和范围必填！',
            type: 'warning'
          });
          return false
        }

        this.listLoading = true
        this.listQuery.title = this.listQuery.title.trim()
        const params = Object.assign({}, this.listQuery)
        if (this.listQuery.updateTime) {
          params.startUpdateTime = this.listQuery.updateTime[0]
          params.endUpdateTime = this.listQuery.updateTime[1]
        } else {
          params.startUpdateTime = ''
          params.endUpdateTime = ''
        }

        // params.scene = params.scene.join(',')

        articleAuditList(params).then(response => {
          this.listLoading = false
          this.list = response.Data
          this.total = parseInt(response.total)
        }).catch(err=>{
          this.listLoading = false;
        })
      },
      getPlateList() {
        articleAllPlateList({
          pageNum: 1,
          pageSize: 99999
        }).then(response => {
          this.allPlateList = response.Data
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val
        this.getList()
      },
      handleUpdate(row) {
        this.isUpdate = true
        row.editLoading = true
        articleGet(row).then(response => {
          this.temp = Object.assign({}, response.Data[0])
          var ranges = this.temp.ranges;
          var scene = this.temp.scene === undefined?['0']:this.temp.scene.split(',').filter(item=>{return item!== ''} );
          this.temp.scene === undefined
            ? ['0']
            : this.temp.scene.split(',').filter((item) => {
              return item !== ''
            })
        var newstype = this.temp.newstype
        for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
          this.temp['additional_' + this.temp.newsInfoExtends[i].extendIndex] =
            this.temp.newsInfoExtends[i].extendContent || ''
        }
        this.image = response.Data[0].pictureEntity || ''
        this.$set(
          this.temp,
          'stockInfoslist',
          Object.assign([], response.Data[0].stockInfos)
        )
        this.$set(
          this.temp,
          'fundInfoslist',
          Object.assign([], response.Data[0].fundInfos)
        )
        this.options0 = Object.assign([], this.temp.conceptInfos)
        this.options1 = Object.assign([], this.temp.industryInfos)
        this.options2 = Object.assign([], this.temp.userDefinedInfos)
        this.organOptions = Object.assign([], this.temp.organInfos)
        this.flowChartList = Object.assign([], this.temp.marketInfos)
        this.rwOptions = Object.assign([], this.temp.peopleInfos)
        this.areaOptions = Object.assign([], this.temp.districtInfos)
        this.temp.stockInfoslist = this.temp.stockInfos
        this.temp.fundInfoslist = this.temp.fundInfos
        this.$set(
          this.temp,
          'newsPlateCodes2',
          Object.assign([], this.temp.userDefinedInfos)
        )
        this.$set(
          this.temp,
          'newsClassId',
          Object.assign([], this.temp.classInfos)
        )
        this.$set(this.temp, 'ranges', ranges)
        this.$set(this.temp, 'scene', scene)
        this.$set(this.temp, 'newstype', newstype)

        this.options = this.temp.classInfos
        this.temp.auditStatus = this.temp.classInfos[0].auditStatus
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        if (this.$refs.editor) this.$refs.editor.setContent(this.temp.content)
        row.editLoading = false

        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.phone .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })

        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.pc .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      })
    },
    handleTabClick(node){
        if(node.paneName==='0'){
          this.$nextTick(()=>{
            let strongs = document.querySelectorAll('.phone .content>p strong')
            for (let i = 0; i <strongs.length ; i++) {
              if(strongs[i].getAttribute('data-code')){
                let text= strongs[i].innerText
                strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
              }
            }
          })
        }else{
          this.$nextTick(()=>{
            let strongs = document.querySelectorAll('.pc .content>p strong')
            for (let i = 0; i <strongs.length ; i++) {
              if(strongs[i].getAttribute('data-code')){
                let text= strongs[i].innerText
                strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
              }
            }
          })
        }
      },
    handleShow(row) {
      row.editLoading = true
      this.isUpdate = false
      articleGet(row).then((response) => {
        this.temp = Object.assign({}, response.Data[0])
        var ranges = this.temp.ranges
        var scene =
          this.temp.scene === undefined
            ? ['0']
            : this.temp.scene.split(',').filter((item) => {
              return item !== ''
            })
        var newstype = this.temp.newstype
        for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
          this.temp['additional_' + this.temp.newsInfoExtends[i].extendIndex] =
            this.temp.newsInfoExtends[i].extendContent || ''
        }
        this.image = response.Data[0].pictureEntity || ''
        this.temp.stockInfoslist = Object.assign(
          {},
          response.Data[0].stockInfos
        )
        this.temp.fundInfoslist = Object.assign({}, response.Data[0].fundInfos)
        this.options0 = Object.assign([], this.temp.conceptInfos)
        this.options1 = Object.assign([], this.temp.industryInfos)
        this.options2 = Object.assign([], this.temp.userDefinedInfos)
        this.organOptions = Object.assign([], this.temp.organInfos)
        this.flowChartList = Object.assign([], this.temp.marketInfos)
        this.rwOptions = Object.assign([], this.temp.peopleInfos)
        this.areaOptions = Object.assign([], this.temp.districtInfos)
        this.$set(
          this.temp,
          'newsPlateCodes2',
          Object.assign([], this.temp.userDefinedInfos)
        )
        this.$set(
          this.temp,
          'newsClassId',
          Object.assign([], this.temp.classInfos)
        )
        this.$set(this.temp, 'ranges', ranges)
        this.$set(this.temp, 'scene', scene)
        this.$set(this.temp, 'newstype', newstype)
        this.options = this.temp.classInfos
        this.dialogStatus = 'update'
        this.dialogFormVisible2 = true
        if (this.$refs.editor) this.$refs.editor.setContent(this.temp.content)
        row.editLoading = false
        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.phone .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      })
    },
    updateAuditData() {
      const update = () => {
        batchAudited([this.temp.id]).then(() => {
          this.getList()
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '审核成功',
            type: 'success',
            duration: 2000
          })
        })
      }
      if (this.temp.sendChannel && this.temp.sendChannel !== '不推送') {
        this.$confirm(
          '您选择了' +
            this.temp.sendChannel +
            '，如果审核通过将发送给全部用户，是否确认?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          update()
        })
      } else {
        update()
      }
    },
    auditReject() {
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const params = {
          newsIds: this.temp.id,
          auditRejectMessage: value
        }
        auditReject(params).then(() => {
          this.getList()
          this.dialogFormVisible = false
          this.$notify({
            title: '驳回',
            message: '驳回成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    updateAppStatus() {
      var params = {}
      params.id = this.temp.id
      params.scene = this.temp.scene.join(',')
      params.ranges = this.temp.ranges
      params.newstype = this.temp.newstype
      updateAppScene(params)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '更新App运营场景标记成功',
            type: 'success',
            duration: 2000
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '更新App运营场景标记失败'
          })
        })
    },
    handleDelete(row) {
      this.$confirm(
        '一旦失效，该篇资讯将彻底下线并且不可编辑，是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          articleDelete(row).then(() => {
            this.$notify({
              title: '成功',
              message: '失效成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消失效'
          })
        })
    },
    renderClassContent(h, { node, data, store }) {
      return (
        <span
          class={
            node.isLeaf && node.level > 1
              ? 'custom-tree-node'
              : 'custom-tree-node custom-tree-notLeaf'
          }
        >
          <span>{node.label}</span>
          <span>
            {node.level > 1 && node.isLeaf ? (
              <el-button
                size='mini'
                type='text'
                on-click={() => (this.listQuery.cmsNewsClassId = data.id)}
              >
                选择
              </el-button>
            ) : (
              ''
            )}
          </span>
        </span>
      )
    },
    renderContent(h, { node, data, store }) {
      return (
        <span
          class={
            node.isLeaf && node.level > 1
              ? 'custom-tree-node'
              : 'custom-tree-node custom-tree-notLeaf'
          }
        >
          <span>{node.label}</span>
          <span>
            {node.level > 1 && node.isLeaf ? (
              <el-button
                size='mini'
                type='text'
                on-click={(e) => this.selectClassNode(node, data, e)}
              >
                选择
              </el-button>
            ) : (
              ''
            )}
          </span>
        </span>
      )
    },
    selectClassNode(node, data, e) {
      e.stopPropagation()
      this.temp['newsClassId'] = [data]
    },
    selectNode(node, data, e, type) {
      e.stopPropagation()
      const list = this.temp['newsPlateCodes' + type]
      for (let i = 0; i < list.length; i++) {
        if (list[i].code === data.code) return
      }
      list.push(data)
    },
    getClass() {
      const params = {
        pageNum: 1,
        pageSize: 99999
      }
      userClassList(params).then((response) => {
        const temp = {}
        const result = []
        const data = response.Data
        const length = data.length
        for (let i = 0; i < length; i++) {
          temp[data[i].id] = data[i]
          this['options'].push(data[i])
        }
        for (let i = 0; i < length; i++) {
          if (temp[data[i].id].parentId && temp[data[i].parentId]) {
            if (!temp[data[i].parentId].children) {
              temp[data[i].parentId].children = []
            }
            temp[data[i].parentId].children.push(temp[data[i].id])
          } else {
            result.push(temp[data[i].id])
          }
        }
        // this['treeList'][0].children = result
        this.$set(this['treeList'][0], 'children', result)
      })
    }
  }
}
</script>

<style>
  .hide {
    display: none;
  }

  .el-dialog__body {
    padding: 24px;
    line-height: normal;
  }

  .nowrap {
    white-space: nowrap;
  }

  .el-tooltip__popper {
    max-width: 50%;
  }
</style>
<style lang="stylus" scoped>
  .phone {
    word-break break-all
    line-height 24px
    margin auto
    width 375px
    height 600px
    overflow-y auto
    &::-webkit-scrollbar {
      display: none;
    }
    .top-bar {
      text-align center
      padding 10px 15px
      margin 0 -20px
      position absolute
      top 0
      width 373px
      background-color #000
      color #fff
      font-size 120%
      font-weight bold
    }
    .title {
      text-align justify
      margin-top 52px
      font-size 110%
      font-weight bolder
    }
    .info {
      font-size 85%
      color #5d5d5d
    }
    .summary {
      text-align justify
      padding 5px 10px
      margin 10px 0 10px
      font-size 90%
      line-height 1.2rem
      color #333
      border-radius 5px
      background-color #ddd
    }
    .content {
      text-align justify
      &:after {
        display: inline-block;
        content: '';
        padding-left: 100%;
      }
    }
  }

  .pc {
    word-break break-all
    line-height 24px
    font-size: 16px
    margin auto
    width 100%
    height 600px
    overflow-y auto
    &::-webkit-scrollbar {
      display: none;
    }
    .title {
      text-align justify
      margin-top 12px
      font-size 120%
      font-weight bolder
    }
    .info {
      font-size 85%
      color #5d5d5d
    }
    .summary {
      text-align justify
      padding 5px 10px
      margin 10px 0
      font-size 90%
      line-height 1.2rem
      color #333
      border-radius 5px
      background-color #ddd
    }
    .content {
      text-align justify
      &:after {
        display: inline-block;
        content: '';
        padding-left: 100%;
      }
    }
  }

  .image-button {
    padding 10px
    background-color transparent
    border none
    width 100%
    &:hover {
      box-shadow 0 0 10px #aaa
      border #aaa
    }
  }
</style>

